<template>
  <div class="groupLink">
    <topBg :myBg="'home/groupLink/tgBg.png'" />
    <div class="groupContent">

        <!-- 团长信息 -->
        <div class="userCard">
            <div class="jscenter">
                <nut-image round :src="receptData.avatar ? receptData.avatar :'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png'" class="userImg"  showError @click="goTocommander">
              <template #error>
                <nut-image
                  src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                  fit="contain"
                />
              </template>
            </nut-image>
            <div class="userCardCenter">
            <p class="name">{{ receptData.nickname }}</p>
            <p class="personCount">跟团人数{{ receptData.join_count }}</p>
            </div>
            <share-btn @myShare="shareWtg"></share-btn>
            </div>
            <div class="userCardBottom">{{ receptData.user_intro }}</div>
        </div>

        <section>
            <div class="address" v-if="receptData.logistics_type == 2 || receptData.logistics_type == 3">
                <p>支持提货点</p>
               
                <div class="locations">
                    <div class="myAddress acenter" v-for="(item,index) in receptData?.self_priming_list" :key="item.id">
                        <template v-if="!canSeeLoction">
                            <template  v-if="index <2">
                                <nut-image  :src="getAssetsFile('home/groupLink/location.png')"></nut-image>
                                <p class="texthiden"> {{item.city_province.replace(/,/g,'') + item.detail_address }}</p>
                            </template>
                        </template>
                        <template v-if="canSeeLoction">
                            <nut-image  :src="getAssetsFile('home/groupLink/location.png')"></nut-image>
                            <p class="texthiden"> {{item.city_province.replace(/,/g,'') + item.detail_address }}</p>
                        </template>
                    </div>
                    <div class="seeMoreDown ccenter" @click="seeMoreLocation" v-if="receptData.self_priming_list?.length>2">
                        <template v-if="!canSeeLoction">
                            <p>查看全部</p>
                            <nut-image  :src="getAssetsFile('home/groupLink/down.png')"></nut-image>
                        </template>
                        <template v-if="canSeeLoction">
                            <p>收起</p>
                            <nut-image  :src="getAssetsFile('home/groupLink/up.png')"></nut-image>
                        </template>
                    </div>
                </div>
               
            </div>
            <div class="express">
                <div class="expressTop ">
                <div class="title">
                    <p>{{ receptData.title }}</p>
                    <div class="acenter">
                        <div class="refund ccenter" v-if="!receptData.is_allowed_refund">不支持退款</div>
                    <div class="expressType ccenter">
                        <p v-if="receptData.logistics_type == 1 || receptData.logistics_type == 3">快递</p>
                        <p v-if="receptData.logistics_type == 2 || receptData.logistics_type == 3">自提</p>
                    </div>
                    </div>
                   
                </div>
                </div>
                <div class="product">
                    <div class="productTitle ">
                        <p>本团</p>
                        <p>商品</p>
                    </div>
                    <div class="line"></div>
                    <ul class="productList">
                        <li class="productItem acenter" v-for="item in receptData.goods_list" :key="item.id">
                            <nut-image :src="commonStore.img_domain + item.image_list[0]" showError>
                                <template #error>
                                    <nut-image
                                    src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                                    />
                                </template>
                            </nut-image>
                            <div class="itemRight">
                                <p class="productName texthiden">{{ item.goods_name }}</p>
                                <p class="productNamPrice acenter"><span>￥</span>{{item.format_price  }}</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <p class="times jscenter">
                    <p class="createTime">{{ receptData.create_time }} 发布</p>
                    <p class="endTime" v-if="receptData.status ==1">
                        {{ receptData.end_time }}
                        <!-- <nut-countdown  :startTime="Date.now() - 20 * 1000" :endTime=" receptData.end_time" ></nut-countdown> -->
                         后结束</p>
                         <p class="endTime" v-else-if="receptData.status ==0">已结束</p>
                         <p class="endTime" v-else-if="receptData.status ==-1">未开始</p>
                </p>
                <!-- <p class="userCount">{{ receptData.seePeople }}人查看</p> -->
                <div class="bottomLine"></div>
                <div class="productInfo">
                    <div class="productItem" v-for="(productItem,pindex) in receptData.image_text_vos" :key="pindex">
                        <goodsInfo :options="productItem"></goodsInfo></div>
                    
                </div>
            </div>
        </section>
        <!---------------------- 添加到购物车 ---------------------->
        <section>
            <div class="buyContent">
                <template v-for="(item,index) in receptData.goods_list" :key="item.id">
                    <buyCard :options="item"  :status="receptData.status" >
                        <template #default>
                            <nut-image v-if="receptData.status" :src="getAssetsFile('home/groupLink/shoppingCarGreen.png')" @click="showSelectPop(item)"/>
                            <nut-image v-else :src="getAssetsFile('home/groupLink/shoppingCarGray.png')"/>
                        </template>
                    </buyCard>
                    <nut-popup  position="bottom" v-model:visible="item.showSelect" :lock-scroll="true" style="height:80%"  :z-index="2024">
                        <selectPop :options="item" @close="closeSelectPop(item)" @reduce="reduceSelect(item)" @plus="plusSelect(item)" @type="typeSelectPop(item)" @size="sizeSelectPop(item)" @add="addToCar"></selectPop>
                    </nut-popup>
                    <div class="bottomLine" v-if="index<receptData.goods_list.length-1"></div>
                </template>
               
            </div>
        </section>

        <!---------------------- 跟团记录 ---------------------->

        <section>
            <div class="record">
                <p class="title">跟团记录</p>
                <template v-if="receptData.join_member_list?.length>0">
                    <template v-for=" (person,index) in receptData.join_member_list">
                        <div class="recordItem jscenter" v-if="index <3">       
                                <p>{{ person.join_no }}</p>
                                    <nut-image round :src="person.avatar" showError>
                                        <template #error>
                                            <nut-image
                                            src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/avatar.png"
                                            fit="contain"
                                            />
                                        </template>
                                     </nut-image>
                                        <div class="rightPath">
                                            <div class="rightTop acenter">
                                                <p>{{ person.nickname }}</p>
                                                <p>{{ person.human_create_time }}</p>
                                            </div>
                                            <div class="rightBottom texthiden">{{ person.address }}</div>
                                        </div>
                                    <div class="addCount">+1</div>
                        </div>
                     <div>
                        <div class="recordItem jscenter" v-if="index >=3 && canSeePeople">    
                                <p>{{ person.join_no }}</p>
                                <nut-image round :src="person.avatar"></nut-image>
                                <div class="rightPath">
                                    <div class="rightTop acenter">
                                        <p>{{ person.nickname }}</p>
                                        <p>{{ person.human_create_time }}</p>
                                    </div>
                                    <div class="rightBottom texthiden">{{ person.address }}</div>
                                </div>
                                    <div class="addCount">+1</div>
                            </div>
                     </div>
                    </template>
                   
              
        
                <template v-if="receptData.join_member_list?.length>3">
                    <p class="seeMore" @click="seeMorePeople" v-if="canSeePeople">收起</p>
                    <p class="seeMore" @click="seeMorePeople" v-if="!canSeePeople">点击查看更多...</p>
                </template>
               
            </template>
            <template v-else>
                <div class="defaultRecord lcenter">
                    <nut-image  :src="getAssetsFile('home/groupLink/defaultRecord.png')"></nut-image>
                    <p>一大波人正在赶来~</p>
                </div>
            </template>
            </div>
        </section>

        <buyFoot v-if="!organizerFlag" :buy-btn-info="btnInfo" @show="showChose =true" @buy="goTopay" :status="receptData.status"></buyFoot>
         
    </div>

     <!---------------------- 购物车已选商品 ---------------------->
    <div class="buyFootDialog">

        <my-image-preview ref="myImagePreviewRef"></my-image-preview>
            <nut-popup position="bottom" v-model:visible="showChose" :lock-scroll="true" :z-index="20">
                <div class="popTop jscenter">
                    <p>已选商品</p>
                    <nut-image
                    :src="getAssetsFile('home/closeIcon.png')"
                    @click="showChose = false"
                    ></nut-image>
                </div>
                
                <div class="popCenter" v-if="carData.list?.length">
                    <div class="cardList" v-for="father in carData.list">
                        <template v-if="father.cart_items?.length" >
                            <template v-for="child in father.cart_items">
                            <product-card
                            :options="child"
                            @plus="plusCount(child)"
                            @reduce="reduceCount(child,father)"
                            @show="showFn"
                            ></product-card>
                            </template>
                        </template>

                        <template v-else>
                            <nut-image class="carDefault"  :src="getAssetsFile('car/carDefault.png')"></nut-image>
                        </template>
                    </div>
                   
                </div>
                <div class="popCenter" v-else>
                    <nut-image class="carDefault"  :src="getAssetsFile('car/carDefault.png')"></nut-image>
                </div>
            </nut-popup>
     </div>
    <orderFoot v-if="organizerFlag" :groupbuy_id="groupbuy_id" :buy_type="buy_type" @stop="stopGroup" @delete="deleteGroup"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import topBg from "../components/topBg/topBg.vue";
import shareBtn from "../components/utils/shareBtn.vue";
import buyCard from "../components/buyCard/buyCard.vue";
import buyFoot from "./components/buyFoot.vue";
import goodsInfo from "./components/goodsInfo.vue";
import selectPop from "./components/selectPop.vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
import { Toast } from "@nutui/nutui";
import ProductCard from "@/components/productCard/ProductCard.vue";
import {getDetailApi,overGroupBuyApi,delGroupBuyApi} from '@/api/home/index'
import { useRoute, useRouter } from "vue-router";
import { getListApi, updateCarApi,queryCountApi,addCarApi } from "@/api/car/index";
import {checkOrganizerApi} from "@/api/order"
import  orderFoot from "./components/orderFoot.vue"
import useCommonStore from "@/store/common";
import myImagePreview from "@/components/imagePreview/index.vue";
const commonStore = useCommonStore();
const route = useRoute()
const router =useRouter()
//-----------------------------------------------跳转团长详情------------------------------------------------
const goTocommander= ()=>{
    // router.push({path:'home/commander',query:{
    //     id:''
    // }})
}
//-----------------------------------------------判断是否是团长发布------------------------------------------------
const organizerFlag = ref<boolean>(false)
const  groupbuy_id=ref<any>()
let remark = route.query.remark;
let buy_type = ''

const checkOrganizer = async ()=>{
    let res =await checkOrganizerApi({groupbuy_id:route.query.userId})
    if(isRes(res)){
        groupbuy_id.value = route.query.userId 
        organizerFlag.value = res.result
    }
}
checkOrganizer()
//------------------------------------------------获取购物车信息---------------------------------------------------
let getListParam = {
  page: 1,
  pagesize: 9999,
  groupbuy_id:route.query.userId
};
let carData:any =ref({})
const getList = async () => {
  let res = await getListApi(getListParam);
  if (isRes(res)) {
   carData.value = res.result
   
   getTotalPrice()
  }
};
const queryCount = async ()=>{
    let res = await queryCountApi({ groupbuy_id:route.query.userId})
    btnInfo.value.count =res.result?.count
    
}
getList()
queryCount()
//------------------------------------------------获取详情数据---------------------------------------------------

const getDetail =async ()=>{
    let res = await getDetailApi(route.query.id)
    if(isRes(res)){
        receptData.value = res.result.groupbuy
        btnInfo.value.start_time = receptData.value.start_time
        btnInfo.value.iosStartTime = btnInfo.value.start_time.replace(/-/g,"/")
        btnInfo.value.start_time_stamp = receptData.value.start_time_stamp
        
        buy_type = res.result.groupbuy.buy_type
        if( receptData.value.self_priming_list?.length >=2){
            canSeeLoction.value =false
        }else{
            canSeeLoction.value =true
        }

        if(receptData.value.join_member_list?.length >=3){
            canSeePeople.value =false
        }else{
            canSeePeople.value =true
        }
        receptData.value.goods_list.map((goodsItem:any,gIndex:number)=>{
            goodsItem.myCount =1
        })
    }
}
getDetail();
const shareWtg = () => {
    let body = {
    name: "微团购",
    icon: "http://emoji.mpshenghuo.com/icon_micro_group.jpg",
    title: receptData.value.title,
    userName: receptData.value.nickname,
    userAvatar: receptData.value.avatar,
    imgUrl: receptData.value.goods_list[0].image_list
      ? commonStore.img_domain + receptData.value.goods_list[0].image_list[0]
      : "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png",
    price:  receptData.value.goods_list[0].share_price,
    // link: `http://192.168.10.23:9527/#/loading?type=2&&id=${item.serial_num}&&userId=${item.id}`,
    link: `${import.meta.env.VITE_BASE_URL}#/loading?type=2&&id=${route.query.id}&&userId=${route.query.userId}`,
    type: "2",
  };
  console.log(body);
  
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    window.webkit.messageHandlers.setShareData.postMessage(
      JSON.stringify(body)
    ); //调用ios方法
  } else if (/(Android)/i.test(navigator.userAgent)) {
    window.myjs.setShareData("微团购", JSON.stringify(body)); //myjs 是android端和js协商定义的调用对象, addFriend 是方法名,
  }
};


let btnInfo:any=ref({
    img:'home/groupLink/greenBottom.png',
    noImg:'home/groupLink/grayBottom.png',
    price:0,
    text:'跟团购买',
    count:200,
    start_time:'',
    iosStartTime:'',
    start_time_stamp:"",
})
//-------------------------------------------------购已选商品弹窗-------------------------------------------------
let showChose = ref<boolean>(false)


const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();

const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};

const getTotalPrice = () => {
    btnInfo.value.price = 0;
    carData.value.list.map((item: any) => {
    item.cart_items.map((element: any) => {
      btnInfo.value.price = ((element.format_price*100) * element.quantity + btnInfo.value.price *100)/100;
    });
  });
  
};

const plusCount = async (item: any) => {
  let param = {
    item_id: item.id,
    quantity: 1,
  };
  let res = await updateCarApi(param);
  if (isRes(res)) {
   
    item.quantity++;
    getTotalPrice()
  }
};

const reduceCount = async (item: any, father: any) => {
  let param = {
    item_id: item.id,
    quantity: -1,
  };
  let res = await updateCarApi(param);
  if (isRes(res)) {
    item.quantity--;
    if (item.quantity == 0) {
      father.cart_items.map((cData: any, index: number) => {
        if (cData.id == item.id) {
          father.cart_items.splice(index, 1);
        }
      });
    }
    getTotalPrice()
    queryCount()
  }
};
//-------------------------------------------------购物车弹窗-------------------------------------------------
const showSelectPop = (item:any)=>{
    item.myCount =1
    item.showSelect =true
}
const closeSelectPop = (item:any)=>{
    
    item.showSelect =false
}
const reduceSelect=(item:any)=>{
    if (item.myCount > 1) {
    item.myCount--;
  } else {
    Toast.warn("数量不能少于1");
  }
    
}
const plusSelect=(item:any)=>{
    item.myCount++;
    
}

const typeSelectPop=(item:any)=>{
    
    
}
const sizeSelectPop=(item:any)=>{
    
    
}
const addToCar = async (payload:any,carItem:any)=>{
    
    let res = await addCarApi(payload)
    if(isRes(res)){
        carItem.showSelect =false
        carItem.myCount =1
        carItem.spec_group_list.map((father:any)=>{
            father.hasChose =false;
            father.specs.map((child:any)=>{
                child.isChose =false
            })
        })
        getList()
        queryCount()
    }
}
let receptData:any = ref({
})

//-----------------------------------查看更多-----------------------------------
let canSeeLoction = ref<boolean>(false) 
const seeMoreLocation = ()=>{
    canSeeLoction.value =!canSeeLoction.value
}

let canSeePeople = ref<boolean>(false) 
const seeMorePeople = ()=>{
    canSeePeople.value = !canSeePeople.value
}


//------------------------------------跟团购买-----------------------------------
const goTopay = ()=>{
    if( btnInfo.value.count){
        let choseIds:any = [];
    carData.value.list.map((father:any,index:number)=>{
        father.cart_items.map((child:any,location:number)=>{
            choseIds.push(child.id)
        })
    })
    localStorage.setItem('car_ids',JSON.stringify(choseIds))
    router.push({ path: "/home/payOrder",query:{groupbuy_id:route.query.userId,logistics_type:receptData.value?.logistics_type} });
    }else{
        Toast.fail('购物车为空')
    }
    
}
//结束团购
const stopGroup = async (payload:any)=>{
    if(receptData.value.status ==0){
        Toast.fail('团购已结束')
    }else{
        let res = await overGroupBuyApi({id:route.query.userId})
        if(isRes(res)){
            getDetail()
        }
    }
   
    
}

//删除团购
const deleteGroup = async(payload:any)=>{
    let res = await delGroupBuyApi({id:route.query.userId})
    if(isRes(res)){
            router.push('/home')
        }
}
</script>

<style lang="scss" scoped>
.groupLink {
    background: #F8F9FA;
    position: relative;
    .bottomLine{
        height: 0px;
        border: 1px solid #EEEEEE;
        margin: 30px 0;
    }
    .groupContent{
        margin-top: -153px;
        padding-bottom: 200px;
        section{
            width:calc( 100% - 40px);
            margin:  0 auto;
            margin-top: 20px;
        }
        .userCard{
        background: #FFFFFF;
        border-radius: 30px 30px 0px 0px;
        padding: 30px 30px 34px 30px;
        position: relative;
        .userImg{
            width: 140px;
                height: 140px;
                box-shadow: 0px 7px 12px 0px rgba(204,230,201,0.33);
                position: absolute;
            top: -30px;
        }
        .userCardCenter{
            margin-left: 166px;
            margin-right: auto;
            .name{
                font-size: 36px;
                color: #000000;
                font-weight: 500;
            }
            .personCount{
                margin-top: 5px;
                font-size: 22px;
                color: #999999;
            }
        }
        .userCardBottom{
            margin-top: 40px;
            font-size: 24px;
            color: #666666;
        }
        }
        .address{
            background: #FFFFFF;
            padding:32px 20px 40px 20px;
            p{
                margin-left: 10px;
                font-size: 28px;
                color: #000000;
            }
            .locations{
                margin-top: 14px;
                // max-height: 238px;
                background: #F7F8F9;
                border-radius: 14px;
                padding: 22px 30px;
                p{
                    margin-left: 0;
                }
                .myAddress{
                    margin-top: 30px;
                    .nut-image{
                        margin-right: 18px;
                        :deep(img){
                            width: 25px;
                            height: 30px;
                        }
                    }
                }
                .myAddress:nth-child(1){
                    margin-top:0
                }
                .seeMoreDown{
                    margin-top: 10px;
                        p{
                            font-size: 26px;
                            color: #999999;
                            margin-right: 5px;
                        }
                        .nut-image{
                            margin-right: 7px;
                            :deep(img){
                                width: 26px;
                                height: 26px;
                            }
                    }  
                }
            }
        }
        .express{
            padding: 30px;
            background: #FFFFFF;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            .expressTop{
                .title{
                    font-weight: 500;
                    font-size: 32px;
                    color: #333333;
                    line-height: 45px;
                   p{
                    // overflow: hidden;
                    // text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
                    // display: -webkit-box;
                    // -webkit-line-clamp: 2; // 设置两行文字溢出
                    // -webkit-box-orient: vertical;
                    margin-bottom: 10px;
                   }
                    .refund{
                        padding:0 3px;
                        // width: 108px;
                        word-break: keep-all;
                        margin-left:10px;
                        height: 32px;
                        border-radius: 6px;
                        border: 1px solid #F55726;
                        color: #F55726;
                        font-size: 20px;
                        padding:0px 5px;
                    }
                    .expressType{
                        // width: 60px;
                        p{
                            margin: 0;
                            word-break: keep-all;
                            height: 32px;
                            line-height: 32px;
                            border-radius: 6px;
                            border: 1px solid #40AE36;
                            color: #40AE36;
                            font-size: 20px;
                            padding:0px 5px;
                            
                        }
                        p:nth-child(1){
                            margin: 0 10px;
                        }
                        
                    }
                    
                }
            }
            .product{
                height: 128px;
                background: #F7F8F9;
                border-radius: 14px;
                display: flex;
                align-items: center;
                margin-top: 31px;
                padding: 22px 0 22px 26px;
                .productTitle{
                    width: 105px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    p{
                        font-size: 28px;
                        color: #000000;
                    }
                }
                .line{
                    width: 4px;
                    height: 67px;
                    background-color:  #DCDCDC;
                    margin-right: 19px;
                }
                .productList{
                    width: 530px;
                    display: flex;
                    overflow-x: scroll;
                    .productItem{
                        margin-left: 30px;
                        .nut-image{
                        :deep(img){
                            width: 84px;
                            height: 84px;
                            border-radius: 8px;
                            }
                        }     
                        .itemRight{
                            margin-left: 7px;
                            .productName{
                                width: 125px;
                                font-size: 24px;
                                color: #000000;
                            }
                            .productNamPrice{
                                font-weight: 500;
                                color: #F55726;
                                font-size: 24px;
                                margin-top: 9px;
                                span{
                                    font-size: 18px;
                                    margin-right: 2px;
                                }
                            }
                        }
                    }
                    .productItem:nth-child(1){
                        margin-left: 0px;
                    }
                }
               
            }
            .times{
                margin-top: 20px;
                .createTime{
                    color: #999999;
                    font-size: 24px;
                    // margin-right: 34px;
                }
                .endTime{
                    color: #F55726;
                    font-size: 24px;
                }
            }
            .userCount{
                margin-top: 12px;
                color: #999999;
                font-size: 24px;
            }
            .productInfo{
            }
        }
        .buyContent{
            padding: 30px;
            background: #FFFFFF;
            border-radius: 20px;
            :deep(.nut-popup){
                border-radius: 40px 40px 0px 0px !important;
                // overflow-y:hidden
            }
            :deep(.nut-overlay){
                background: rgba(0,0,0,.5) !important;
               
            }
            .nut-image{
                position: absolute;
                right: 0;
                bottom: 20px;
            :deep(img){
                width: 50px;
                height: 50px;
            }
           
        }
        
        }
        .record{
            padding: 30px;
            background: #FFFFFF;
            border-radius: 20px;
            .title{
                color: #333333;
                font-size: 30px;
                }
            }
            .recordItem{
                margin-top: 30px;
                p{
                    color: #333333;
                    font-size: 28px;
                }
                .nut-image{
                    margin-left: 27px;
                    :deep(img){
                        width: 60px;
                        height: 60px;
                    }
                }
                .rightPath{
                    margin-left: 14px;
                    margin-right: auto;
                    .rightTop{
                        p:nth-child(1){
                            color: #333333;
                            font-size: 28px;
                        }
                        p:nth-child(2){
                            margin-left: auto;
                            color: #999999;
                            font-size: 20px;
                        }
                    }
                    .rightBottom{
                        width: 482px;
                        color: #999999;
                        font-size: 24px;
                    }
                }
                .addCount{
                    color: #F55726;
                    font-size: 24px;
                }
            }
            .seeMore{
                text-align: center;
                margin-top: 20px;
                color: #999999;
                font-size: 26px;
            }
            .defaultRecord{
                height: 375px;
                background: #FFFFFF;
                border-radius: 20px;
                .nut-image{
                    :deep(img){
                        width: 300px;
                        height: 245px;
                    }
                }
                p{
                    font-size: 28px;
                    color: #999999;
                }
            }
    }
    .buyFootDialog{
    :deep(.nut-popup) {
        padding: 0 30px;
        width: -webkit-fill-available;
        bottom: 122px !important;
        border-radius: 40px 40px 0px 0px;
    .popTop {
      margin-top: 36px;
      padding-bottom: 30px;
      border-bottom: 1px solid #eeeeee;
      p {
        font-size: 32px;
        color: #000000;
      }
      .nut-image {
        .nut-img {
          width: 26px;
          height: 26px;
        }
      }
    }
    .popCenter {
      padding-bottom: 60px;
      .carDefault{
        padding: 50px 0;
        width: 240px;
        height: 180px;
        margin: 0 auto;
      }
    }
  }
    }
   
}
</style>
